.index-yuyin-box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; }

.yuyin-box { width: 980px; margin: 0 auto; padding-top: 25%; font-family: arial,'pingfang sc',stheiti,"microsoft yahei", sans-serif; font-weight: normal; }
.yuyin-box th { height: 100%; line-height: 52px; font-size: 32px; color: #333; width: 450px; text-align: left; font-weight: normal; }
.yuyin-box th a { font-size: 18px; color: #00c; text-decoration: none; }
.yuyin-box th a:hover { text-decoration: underline; }
.yuyin-box td { height: 100%; padding-left: 320px; }
.yuyin-box .round { width: 124px; height: 124px; display: inline-block; position: relative; }
.yuyin-box .round .s1 {display: none;animation: round 2s ease infinite;-webkit-animation: round 2s ease infinite;width: 122px;height: 122px;position: absolute;left: 0;top: 0;border: 1px solid #fd6853;border-radius: 63px;}
.yuyin-box .round .s2 { display: inline-block; width: 124px; height: 124px; background: #fd6853; position: relative; overflow: hidden; border-radius: 64px; z-index: 2; }
.yuyin-box .round .s2 i { background: url(/web/img/voice/index/ico_yuyin.png) 0 0 no-repeat; width: 46px; height: 63px; position: absolute; z-index: 2; top: 33px; left: 40px; }
.yuyin-box .round .s3 { width: 248px; display: none; height: 124px; background: url(/web/img/voice/index/ico_yuyin2.png) 0 0 repeat-x; position: absolute; left: 0; bottom: 0; animation: round2 1s linear infinite; -webkit-animation: round2 1s linear infinite; }
.yuyin-box .round.on .s1, .yuyin-box .round.on .s3 { display: inline-block; }
.yuyin-box .round .s4 { display: none; }

@-webkit-keyframes round { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }
  100% { -webkit-transform: scale3d(1.8, 1.8, 1.8); transform: scale3d(1.8, 1.8, 1.8); opacity: 0; } }

@keyframes round { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; }
  100% { -webkit-transform: scale3d(1.8, 1.8, 1.8); transform: scale3d(1.8, 1.8, 1.8); opacity: 0; } }
@-webkit-keyframes round2 { 0% { left: 0; }
  100% { left: -124px; } }
@keyframes round2 { 0% { left: 0; }
  100% { left: -124px; } }
.yuyin-box .load .s2 { background: #fff; overflow: initial; }
.yuyin-box .load .s2 i { background: url(/web/img/voice/index/ico_yuyinv2.png) 0 0 no-repeat; }
.yuyin-box .load .s2 .s4 { display: block; background: url(/web/img/voice/index/ico_quan.png) 0 0 no-repeat; width: 124px; height: 124px; position: absolute; left: 0; top: 0; animation: round3 2s linear infinite; -webkit-animation: round3 2s linear infinite; }

@-webkit-keyframes round3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes round3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.yuyin-box .err .s2 { background: #fff; overflow: initial; }
.yuyin-box .err .s2 i { background: none; }
.yuyin-box .err .s2 .s4 { background: url(/web/img/voice/index/ico_err.png) 0 0 no-repeat; width: 134px; height: 134px; position: absolute; left: -5px; top: -5px; display: block; }

.yuyin-box .yuyin-close { background: url(/web/img/voice/index/ico_close.png) 0 0 no-repeat; width: 24px; height: 24px; position: absolute; top: 20px; right: 36px; }

.yuyin-box .yuyin-close:hover { background: url(/web/img/voice/index/ico_close.png) 0 -50px no-repeat; }

.search-box .fayin { width: 24px; height: 24px; position: absolute; top: 11px; right: 87px;background: url(/web/img/voice/index/ico_fy.png) 5px 1px no-repeat;
	background-image: -webkit-image-set(url(/web/img/voice/index/ico_fy@2.png)2x,url(/web/img/voice/index/ico_fy.png)1x); background-image: -moz-image-set(url(/web/img/voice/index/ico_fy@2.png)2x,url(/web/img/voice/index/ico_fy.png)1x);z-index: 4; }

.search-box .fayin:hover { background-position: 5px -59px;}
